<template>
  <div class="app-container">
    <div class="header">
      <div class="word">
        <div class="w1">
          产品表
        </div>
        <div class="w2">
          在本系统中你可以查看产品名称等基本信息。
        </div>
      </div>
      <img
        class="imgDri"
        src="../../processManagement/static/u=2350128280,2322292732&fm=253&fmt=auto&app=138&f=JPG.webp"
      >
    </div>
    <div class="index">
      <div class="searchHead">
        <el-button type="primary" @click="openForm()">新增产品信息</el-button>
        <el-input v-model="searchInput" placeholder="请输入要查询的数据" class="searchIuput">
          <el-select slot="prepend" v-model="select" class="sel3" placeholder="请选择" style="width: 120px;">
            <el-option label="产品名称" value="productName" />
            <el-option label="生产批号" value="batchNumber" />
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="search" />
        </el-input>
      </div>
      <el-table :data="dataList" type="" style="width: 100%">
        <el-table-column prop="productPicture" label="产品图片" width="220" >
          <template #default="scope">
            <img :src="scope.row.productPicture" style="width:120px;height:120px">
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="产品名字" width="150" />
        <el-table-column prop="productDesc" label="产品描述" />
        <el-table-column prop="productPrice" label="产品价格（元）" />
        <el-table-column prop="traceId" label="溯源ID" />
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" style="color:green" @click="openTrace(scope.row)">溯源</el-button>
            <el-button type="text" @click="openForm(scope.row)">修改</el-button>
            <el-button type="text" style="color:red" @click="deleteHandle(scope.row.productId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
          :current-page="pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <Form  ref="form" @refresh="load"/>
    <Trace ref="trace"></Trace>
  </div>
</template>

<script>
import {getProductPage,deleteProduct} from "@/api/mall/product"
import Form from "./components/form.vue"
import Trace from "@/views/trace/sale/components/trace"
export default {
  name: 'FarmlandSelection',
  components:{Form,Trace},
  data() {
    return {
      dataList: [],
      pageNum: 1,
      pageSize:5,
      total: 0,
      searchInput:'',
      select:0
    }
  },
  async mounted() {
    this.load()

  },
  methods: {
    async load() {
      getProductPage({
        pageNum:this.pageNum,
        pageSize:this.pageSize
      }).then((response) => {
        this.dataList = response.data.records
        this.total = response.data.total
      })
    },
    deleteHandle(id){
      deleteProduct(id).then((response) => {
        if (response.statusCode == 20000) {
          this.refresh()
          this.visible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '发生错误，操作失败',
            type: 'warning'
          })
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val;
      this.pageNum = 1;
      this.load()
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.load()
    },
    search() {
      this.load()
    },
    openForm(data){
      this.$refs.form.init(data)
    },
    openTrace(data){
      this.$refs.trace.init(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 350px;
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
}

.form {
  display: flex;
  flex-wrap: wrap;
}

.sel {
  width: 360px;
  display: flex;
  height: 50px;
  justify-content: flex-end;
  align-content: center;
}

.sel2 {
  width: 240px;
}

.page {
  width: 100%;
  display: flex;
  justify-content: right;
}

.imgDri {
  height: 300px;
  width: 400px;
}

.w1 {
  height: 80px;
  font-size: 25px;
  font-weight: 350;
}

.w2 {
  height: 50px;
  font-size: 15px;
  font-weight: 250;
}

.searchHead {
  display: flex;
  justify-content: space-between;
}

.searchIuput {
  width: 350px;
}

.sel3 {
  width: 120px;
}

.a {
  display: block;
  margin-top: 0px;
  height: 30px;
  background-color: #ffffff;
  border-bottom: 1px solid rgb(135, 206, 250);
  border-left: 1px solid rgb(135, 206, 250);
}

.a1 {
  display: block;
  margin: 0;
  height: 30px;
  background-color: rgb(225, 242, 227);
  border-bottom: 1px solid rgb(135, 206, 250);
  border-left: 1px solid rgb(135, 206, 250);
}

.b {
  display: inline-block;
  // margin: 0;
  margin-top: -18px;
}

.c {
  display: inline-block;
  width: 200px;
  height: 30px;
  // margin: 0
  margin-top: 17px;
  border-right: 1px solid rgb(135, 206, 250);
}

.d {
  display: inline-block;
  border-right: 1px solid rgb(135, 206, 250);
  // border-left: 1px solid rgb(135, 206, 250);
  width: 215.5px;
  height: 30px;
  // margin: 0;
}

.e {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(225, 242, 227);
  width: 831px;
  margin: 0;
  height: 30px;
  border-top: 1px solid rgb(135, 206, 250);
  border-bottom: 1px solid rgb(135, 206, 250);
  border-right: 1px solid rgb(135, 206, 250);
}

.f {
  width: 100%;
  display: flex;
  justify-content: center;
}

.t {
  width: 800px;
  display: inline-block;
}

.g {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.h {
  margin-left: -700px;
}

.i {
  // width: 60px;
  height: 10px;
  font-size: 13px;
  font-weight: 50;
  margin-right: 5px;
}

.i1 {
  //width: 75px;
  height: 10px;
  font-size: 13px;
  font-weight: 50;
}

.j {
  display: flex;
  height: 26px;
  align-items: center;
  justify-content: flex-end;
  // border: 1px solid black;
}

.k {
  display: flex;
  height: 26px;
  align-items: center;
  padding-left: 5px;
}
</style>

